<template>
  <div class="attraction-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>景点管理</span>
        <el-button type="primary" @click="handleAdd" style="float: right;">新增景点</el-button>
      </div>
      
      <el-table :data="attractions" border style="width: 100%">
        <el-table-column prop="name" label="景点名称" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="ticketPrice" label="票价" width="100"></el-table-column>
        <el-table-column prop="averageRating" label="评分" width="100"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="景点名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="票价" prop="ticketPrice">
          <el-input-number v-model="form.ticketPrice" :min="0" :precision="2"></el-input-number>
        </el-form-item>
        <el-form-item label="开放时间" prop="openTime">
          <el-input v-model="form.openTime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      attractions: [],
      dialogVisible: false,
      dialogTitle: '',
      form: {
        attractionId: null,
        name: '',
        address: '',
        description: '',
        ticketPrice: 0,
        openTime: ''
      },
      rules: {
        name: [{ required: true, message: '请输入景点名称', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.fetchAttractions();
  },
  methods: {
    fetchAttractions() {
      // 调用API获取景点列表
      console.log('获取景点列表');
      // 模拟数据
      this.attractions = [
        {
          attractionId: 1,
          name: '测试景点',
          address: '测试地址',
          description: '测试描述',
          ticketPrice: 100,
          openTime: '08:00-18:00',
          averageRating: 4.5
        }
      ];
    },
    handleAdd() {
      this.dialogTitle = '新增景点';
      this.resetForm();
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.dialogTitle = '编辑景点';
      this.form = Object.assign({}, row);
      this.dialogVisible = true;
    },
    handleDelete(row) {
      this.$confirm('确认删除该景点吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用API删除景点
        console.log('删除景点:', row.attractionId);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.fetchAttractions();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });        
      });
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 调用API保存景点
          console.log('保存景点:', this.form);
          this.$message({
            type: 'success',
            message: '保存成功!'
          });
          this.dialogVisible = false;
          this.fetchAttractions();
        }
      });
    },
    resetForm() {
      this.form = {
        attractionId: null,
        name: '',
        address: '',
        description: '',
        ticketPrice: 0,
        openTime: ''
      };
    }
  }
}
</script>

<style scoped>
.attraction-container {
  padding: 20px;
}
</style>